<template>
  <view>
    <Header />
    <view
      class="w-100 h100"
      :style="'margin-top:' + statusHeight + 'rpx'"
    ></view>
    <view class="w-100 f-b-c h80">
      <view
        class="w-25 re h80 f-c-c ty-nav-li"
        @click="nav_change(item)"
        v-for="(item, index) in serve"
        :key="item.code"
        :class="item.code == nav_code ? 'bg-f8ff' : ''"
      >
        <!-- 左边边角显示 选中并且不能是第一个  -->
        <!-- <HornMargin
          img="../static/icon_horn_margin_f8.png"
          type="left-bottom"
          :width="44"
          :height="40"
          v-if="item.code == nav_code && index != 0"
        /> -->
        <view class="t-b font32 font600">{{ item.title }}</view>
        <!-- 右边边角显示  选中并且不能是最后一个 -->
        <!-- <HornMargin
          img="../static/icon_horn_margin_f8.png"
          type="right-bottom"
          :width="44"
          :height="40"
          v-if="item.code == nav_code && index != serve.length - 1"
        /> -->
      </view>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-map"
      :style="'height:' + height + 'rpx'"
      v-if="nav_code == 'ticket'"
    >
      <Ticket></Ticket>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-route"
      :style="'height:' + height + 'rpx'"
      v-if="nav_code == 'activity'"
    >
      <Activity type="ACTIVITY"></Activity>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-work-shop"
      :style="'height:' + height + 'rpx'"
      v-if="nav_code == 'yeas_car'"
    >
      <YeasCar></YeasCar>
    </view>
    <view
      class="w-100 h1356 bg-f8ff ty-activity"
      :style="'height:' + height + 'rpx'"
      v-if="nav_code == 'vip'"
    >
      <Vip></Vip>
    </view>
    <Footer index="ticket"></Footer>
  </view>
</template>

<script>
import Footer from "../../components/footer.vue"; //底部导航
import Header from "../../components/header.vue";
import HornMargin from "../../components/horn_margin.vue";
import Ticket from "./ticket.vue"; // 门票
import Activity from "../map/activity.vue"; // 活动
import YeasCar from "./yeas_car.vue"; // 工坊
import Vip from "./vip.vue"; // 会员专属

export default {
  components: {
    Footer,
    Header,
    HornMargin,
    Ticket,
    Activity,
    YeasCar,
    Vip,
  },
  data() {
    return {
      serve: [
        { title: "门票", code: "ticket" },
        { title: "活动", code: "activity" },
        { title: "年卡", code: "yeas_car" },
        { title: "专享服务", code: "vip" },
      ],
      nav_code: "ticket",
      statusHeight: 0,
      height: 0,
    };
  },
  created() {
    const { statusBarHeight, screenHeight } = uni.getStorageSync("systemInfo");
    this.statusHeight = statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度
    let height = screenHeight / (uni.upx2px(100) / 100);
    this.height = height - (this.statusHeight + 100 + 80);
    uni.setStorageSync("map_height", this.height); //其他页面使用的高度

    // 返回页面后显示 对应的code
    this.nav_code = uni.getStorageSync("nav_code") || "ticket";
  },
  methods: {
    nav_change(e) {
      this.nav_code = e.code;
      // 切换后 设置当前选中的code 用于进入下一层返回
      // 会在底部导航切换时 清除
      uni.setStorageSync("nav_code", e.code);
    },
  },
};
</script>
<style scoped lang="scss">
.ty-nav-li {
  border-radius: 32rpx;
  &.bg-f8ff {
    border-radius: 32rpx 32rpx 0 0;
    .t-b {
      color: #000000;
    }
  }
}
.h1356 {
  // height: 1356rpx;
  border-radius: 0 80rpx 0 0;
}
.ty-map {
  border-radius: 0 80rpx 0 0;
}
.ty-route {
  border-radius: 0 80rpx 80rpx 0;
}
.ty-activity {
  border-radius: 80rpx 0 0 0;
}
.ty-route,
.ty-work-shop {
  border-radius: 80rpx 80rpx 0 0;
}
</style>
